﻿@{
    ViewBag.Title = "Tenant Dashboard";
    Layout = "~/Views/Shared/_Layout.cshtml";

    //TODO:TEMP Default to tnt-0
    var tid = this.ViewBag.TenantId ?? "tnt-0";
}

@section header {
    <script language="javascript">
        var currentDate = new Date();
        var month = Number(@(this.ViewBag.Month)) || (currentDate.getMonth() + 1);
        var year = Number(@(this.ViewBag.Year)) || currentDate.getFullYear();
        var tenantId = "@tid";
    </script>

    <script language="javascript" src="@Url.Content("~/Scripts/cloudninja/pages/cloudninja.metering.pages.TenantDashboard.js")"></script>
}

<div class="page tenantDashboard">
    <h1 class="secondary pageHeader">@tid</h1>

    @Html.Partial("DashboardNav")

    <div id="timePeriodContainer">
        <div class="label"></div>
    </div>

    <div class="clear"></div>

    <div>
        <div class="gaugeContainer">
            <div id="gauge1" class="gaugeChart"></div>
            <br/>
            <div class="gaugeLabel">Database</div>
        </div>
        <div class="gaugeContainer">
            <div id="gauge2" class="gaugeChart"></div>
            <br/>
            <div class="gaugeLabel">Storage</div>
        </div>
        <div class="gaugeContainer">
            <div id="gauge3" class="gaugeChart"></div>
            <br/>
            <div class="gaugeLabel">Bandwidth</div>
         </div>
        <div class="clear"></div>
    </div>

    <div id="chart1container" class="graphChartContainer">
        <div class="title">Web Bandwidth</div>
        <div id="chart1" class="graphChart"></div>

        <span class="blue legendItem">Ingress</span>
        <span class="violet legendItem">Egress</span>
    </div>

    <div id="chart2container" class="graphChartContainer">
        <div class="title">Database Bandwidth</div>
        <div id="chart2" class="graphChart"></div>

        <span class="blue legendItem">Ingress</span>
        <span class="violet legendItem">Egress</span>
    </div>

    <div id="chart3container" class="graphChartContainer">
        <div class="title">Average Database Size</div>
        <div id="chart3" class="graphChart"></div>
    </div>

    <div id="chart4container" class="graphChartContainer">
        <div class="title">Average Storage Size</div>
        <div id="chart4" class="graphChart"></div>
    </div>
</div>
